{% extends "base/base.html" %}
{% load bootstrap4 %}
{% load leaflet_tags %}
{% load taggit_templatetags2_tags %}
{% load staticfiles %}

{% block content %}
<div class="row">
    <div class="col-md-3 card text-white bg-dark" id="info">
        <div class="card-body">
            <div class="card-title text-center" id="feature_name">
                {{ poi.name }}
                <a href="{% url 'poi:edit' id=poi.pk%}" class="fa fa-edit"></a>
            </div>
            <div class="card-title text-center">
                {% get_tags_for_object poi as "tags" %}
                {% for tag in tags %}
                <small><a href="{% url 'tag:tag' tag.slug %}" class="badge badge-pill badge-secondary">{{ tag }}</a></small>
                {% endfor %}
            </div>
            <div class="card-text">
                {{ poi.description|default:'' }}
            </div>
            <div class="card-text">
                <div class="row">
                    <div class="card text-white bg-success text-center col-12">
                        <small>Longitude:</small>
                        {{ poi.longitude|floatformat:5 }}
                    </div>
                </div>
                <div class="row">
                    <div class="card text-white bg-success text-center col-12">
                        <small>Altitude:</small>
                        {{ poi.altitude|floatformat:5 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        {% leaflet_map "mainmap" callback="window.map_init_basic" %}
    </div>
</div>
{% endblock %}

{% block css %}
    {% leaflet_css %}
    <link href="{% static 'css/feature-viewer.css' %}" rel="stylesheet">
{% endblock %}

{% block js %}
    {% leaflet_js %}
    <script>
        var url_poi = "{% url 'poi:json' poi.id %}";
    </script>
    <script src="{% static 'js/poi.js' %}"></script>
{% endblock %}
